<template>
  <view class="content">
    <van-nav-bar title="我的发布" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <view class="notice">
      <van-notice-bar
        custom-class="notice-list"
        color="#FF8345"
        background="#FFF1E2"
        mode="link"
        text="用极速推增加曝光量：首页列表置顶+微信群退"
      >
        <template #left-icon>
          <image class="img-box" src="https://images.tongzhuangkc.com/tz/icon-houjian.png" />
        </template>
      </van-notice-bar>
      <van-notice-bar
        custom-class="notice-list"
        color="#FF8345"
        background="#FFF1E2"
        mode="link"
        text="用上热搜抢占买家注意力，灵活推荐"
      >
        <template #left-icon>
          <image class="img-box" src="https://images.tongzhuangkc.com/tz/icon-resou.png" />
        </template>
      </van-notice-bar>
    </view>
    <Scrollbox className="publish" @lowerFun="getList" :status="loadingStatus" :otherHeight="220">
      <template #contScrollBox>
        <view class="publish-list" v-for="item in list" :key="item.good_id">
          <view class="goods">
            <zero-lazy-load
              class="img-box"
              :image="item.cover"
              loadingImg="https://images.tongzhuangkc.com/tz/default-good.png"
              errorImg="https://images.tongzhuangkc.com/tz/default-good.png"
              borderRadius="16"
            ></zero-lazy-load>
            <view class="goods-info">
              <view class="title">{{ item.content }}</view>
              <view class="goods-status" v-if="item.check_status == 2">审核未通过</view>
              <view class="info-box info-price">
                <text class="price">{{ item.price }}</text>
                <text>{{ item.qinghuo_type }}</text>
                <!-- <text>总量1件</text> -->
              </view>
              <view class="info-box">
                <text>{{ item.publish_time }}</text>
                <text>浏览量{{ item.view_num }}</text>
              </view>
            </view>
          </view>
          <view class="option">
            <view class="option-btn" v-if="item.check_status == 1" @click="refreshHandle(item.goods_id)">刷新</view>
            <view class="option-btn" @click="editHandle(item.goods_id)">编辑</view>
            <view class="option-btn" @click="delHandle(item.goods_id)">删除</view>
            <view
              class="option-btn hot-btn"
              v-if="item.check_status == 1 && item.is_hot_search != 1"
              @click="hotOption(item)"
              >上热搜</view
            >
            <view
              class="option-btn top-btn"
              v-if="item.check_status == 1 && item.is_top != 1"
              @click="topOption(item.goods_id)"
              >置顶</view
            >
          </view>
        </view>
      </template>
    </Scrollbox>
    <TopPage :isShow="isShow" :goodsId="goodsId" @topHandle="topHandle" @closeHandle="isShow = false"></TopPage>
    <HotPage :isShow="isHotShow" @closeHandle="isHotShow = false"></HotPage>
  </view>
</template>

<script>
import { reactive, toRefs } from 'vue'
import TopPage from './top'
import HotPage from './hot'
import Scrollbox from '@/components/scrollbox/index'
import { onShow } from '@dcloudio/uni-app'
import { publishList, checkPublishTimes, checkRefreshTimes, delAjax, addHot } from '@/http/publish'
import { getMemberInfo } from '@/http/user'
export default {
  components: {
    TopPage,
    HotPage,
    Scrollbox,
  },
  setup() {
    const state = reactive({
      isShow: false,
      isHotShow: false,
      goodsId: '',
      list: [],
      listQuery: {
        page: 1,
      },
      loadingStatus: 'loading',
      isEnd: false,
    })
    const topOption = (id) => {
      state.goodsId = id
      state.isShow = true
    }
    const hotOption = async (item) => {
      if (item.hot_search_service == 1) {
        const { data } = await addHot({
          goods_id: item.goods_id,
          force_submit: 0,
        })
        if (data.is_sec_confirm == 1) {
          uni.showModal({
            title: '提示',
            content: '本次设置会替换已上热搜商品，是否继续！',
            success: async function (res) {
              await addHot({
                goods_id: item.goods_id,
                force_submit: 1,
              })
              uni.showToast({
                title: '操作成功',
              })
              state.listQuery.page = 1
              state.isEnd = false
              getList()
            },
          })
        } else {
          uni.showToast({
            title: '操作成功',
          })
          state.listQuery.page = 1
          state.isEnd = false
          getList()
        }
      } else {
        state.isHotShow = true
      }
    }
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    const getList = async () => {
      if (state.isEnd) return
      try {
        let data = await publishList(state.listQuery)
        const { list, total_page } = data.data
        state.list = state.listQuery.page === 1 ? list : state.list.concat(list)

        if (list.length === 0 || total_page === state.listQuery.page) {
          state.loadingStatus = 'loadmore'
          state.isEnd = true
        } else {
          state.loadingStatus = 'loading'
          state.listQuery.page++
        }
      } catch (e) {
        state.isRefresh = false
        state.loading = false
      }
    }
    onShow(() => {
      state.listQuery.page = 1
      state.isEnd = false
      getList()
    })
    const editHandle = async (goods_id) => {
      const res = await getMemberInfo()
      if (res.data.vip_type == 0) {
        uni.showModal({
          title: '提示',
          content: '您尚未开通会员，没有发布权限',
          confirmText: '开通会员',
          success: function (res) {
            uni.navigateTo({
              url: `/subpackage-platform/vip/index`,
            })
          },
        })
        return
      }
      const { data } = await checkPublishTimes({
        goods_id,
      })
      uni.showModal({
        title: '提示',
        content: data.msg,
        success: function (res) {
          if (res.confirm) {
            if (data.flag) {
              uni.navigateTo({
                url: `/pages/public/index?id=${goods_id}`,
              })
            }
          }
        },
      })
    }
    const refreshHandle = async (goods_id) => {
      const { data } = await checkRefreshTimes({ goods_id })
      if (data.msg) {
        uni.showToast({
          title: data.msg,
          icon: 'none',
        })
      }
    }
    const delHandle = (goods_id) => {
      uni.showModal({
        title: '提示',
        content: '您确定要删除该商品？',
        success: async function (res) {
          if (res.confirm) {
            await delAjax({ goods_id })
            uni.showToast({
              title: '删除成功',
            })
            state.listQuery.page = 1
            state.isEnd = false
            getList()
          }
        },
      })
    }
    const topHandle = () => {
      state.isShow = false
      state.listQuery.page = 1
      state.isEnd = false
      getList()
    }
    return {
      ...toRefs(state),
      topOption,
      hotOption,
      onClickLeft,
      getList,
      editHandle,
      refreshHandle,
      delHandle,
      topHandle,
    }
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
}
.notice {
  padding: 8rpx 24rpx;
  .img-box {
    width: 40rpx;
    height: 40rpx;
    margin-right: 8rpx;
  }
  .notice-list {
    padding-left: 24rpx;
    margin: 8rpx 0;
  }
}
.publish {
  height: calc(100vh - 330rpx);
  overflow-y: auto;
  &-list {
    padding: 32rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 16rpx;
    .goods {
      display: flex;
      .img-box {
        width: 192rpx;
        height: 192rpx;
        margin-right: 16rpx;
        border-radius: 32rpx;
        .zero-lazy-item {
          height: 192rpx !important;
        }
      }
      .goods-info {
        width: calc(100% - 208rpx);
        .title {
          height: 28rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #2b303b;
          line-height: 28rpx;
          @include text-ellipsis(1);
        }
        .goods-status {
          font-weight: 500;
          color: #ff8345;
          line-height: 32rpx;
          height: 32rpx;
          width: 116rpx;
          margin-top: 8rpx;
          font-size: 20rpx;
          background: rgba(255, 131, 69, 0.2);
          border-radius: 6rpx;
          text-align: center;
        }
        .info-box {
          display: flex;
          height: 32rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #7f8798;
          line-height: 32rpx;
          margin-top: 32rpx;
          &.info-price {
            text:nth-child(3) {
              padding-left: 8rpx;
            }
            text:nth-child(2) {
              &::before {
                content: '';
                width: 1rpx;
                height: 24rpx;
                background: #7f8798;
                position: absolute;
                top: 4rpx;
                right: 0;
              }
            }
          }
          text {
            position: relative;
            padding-right: 8rpx;
          }

          .price {
            color: #e94148;
            font-size: 32rpx;
          }
        }
      }
    }
    .option {
      padding-top: 24rpx;
      display: flex;
      justify-content: flex-end;
      .option-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 112rpx;
        height: 64rpx;
        font-size: 24rpx;
        color: #2b303b;
        border-radius: 32rpx;
        margin-left: 16rpx;
        border: 2rpx solid #e8e8e8;
        &.hot-btn {
          width: 136rpx;
          color: #fff;
          background: linear-gradient(90deg, #ff92a0 0%, #ee4765 100%);
          box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(241, 83, 111, 0.3);
        }
        &.top-btn {
          width: 136rpx;
          color: #fff;
          background: linear-gradient(90deg, #f7d655 0%, #f19b3e 100%);
          box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(244, 177, 71, 0.3);
        }
      }
    }
  }
}
</style>
